<template>
  <view class="tabbar">
    <view class="tabbar-content">
      <page-index ref="pageIndexRef" v-if="pageCur==='首页'" :userInfo="userInfo"></page-index>
      <page-my ref="pageMyRef" v-if="pageCur==='我'" :userInfo="userInfo"></page-my>
    </view>
    <view class="basic-flex-horizontal tabbar-body">

      <view class="tabbar-list" v-for="(item,index) in pageData" :key="index">
        <image class="tabbar-item-img" v-if="item.isSpecial" @click="scanCode" src="/static/tabbar/icon_2cz.png"/>
        <view v-else class="tabbar-item" @click="tabbarChange(index)">
          <view :class="pageCur === item.text?'text_1':'text_2'">{{ item.text }}</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import pageIndex from "../index/index"
import pageMy from "../my/index"
import userInfo from "../../configure/mixins/userInfo";

export default {
  components: {pageIndex, pageMy},
  mixins: [userInfo],
  data() {
    return {
      pageData: [
        {
          text: "首页",
        },
        {
          text: "关注",
        },
        {
          text: "创作",
          isSpecial: true
        },
        {
          text: "消息",
        },
        {
          text: "我",
        },
      ],
      pageCur: "首页",
    }
  },
  methods: {
    tabbarChange(e) {
      this.pageCur = this.pageData[e].text;
    },
  },
  onReachBottom() {
    switch (this.pageCur) {
      case "首页":
        this.$refs.pageIndexRef.bottomUpMethod()
        break
    }
  }
}
</script>

<style lang="scss" scoped>
.tabbar {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100vh;

  & > .tabbar-content {
    padding-bottom: 86px;
  }

  & > .tabbar-body {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #FFFFFF;
    box-shadow: 0px -2px 8px 1px rgba(0, 0, 0, 0.04);
    border-radius: 5px 5px 0px 0px;
    z-index: 99999;
    padding-top: 12px;
    padding-bottom: 30px;

    & > .tabbar-list {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;

      & > .tabbar-item {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 4px;

        & > .text_1 {
          font-weight: bold;
          font-size: 16px;
          color: #000000;
        }

        & > .text_2 {
          font-weight: bold;
          font-size: 16px;
          color: #8B8B8B;
        }

      }

      & > .tabbar-item-img {
        width: 36px;
        height: 24px;
        border-radius: 6px;
      }
    }

  }

}
</style>
